<template>
  <div>
    <div class="user-info">
      <div class="public-list item-active">
        <upload-img ref="uploadImgs" @singleImg="singleImg"/>
        <div class="public-list-item" @click="editAvatar">
          <div class="content pdBT10">
            <span class="txt">头像</span>
            <svg-icon class="right" icon-class="icon_right" />
            <div class="right-img">
              <img :src="avatar? avatar: avatarSrc" alt="">
            </div>
          </div>
        </div>
        <div class="public-list-item" @click="goToEdit('normal')">
          <div class="content">
            <span class="txt">昵称</span>
            <svg-icon class="right" icon-class="icon_right" />
            <div class="right-txt">{{ name }}</div>
          </div>
        </div>
        <div class="public-list-item" @click="goToEdit('normal')">
          <div class="content">
            <span class="txt">联系人</span>
            <svg-icon class="right" icon-class="icon_right" />
            <div v-if="account.contact_name" class="right-txt">{{ account.contact_name }}</div>
            <div v-else class="right-txt font-colorGrey">未设置</div>
          </div>
        </div>
        <div class="public-list-item" @click="goToEdit('normal')">
          <div class="content">
            <span class="txt">手机号</span>
            <svg-icon class="right" icon-class="icon_right" />
            <div v-if="account.contact_mobile" class="right-txt">{{ account.contact_mobile }}</div>
            <div v-else class="right-txt font-colorGrey">未设置</div>
          </div>
        </div>
        <div class="public-list-item" @click="goToEdit('password')">
          <div class="content">
            <span class="txt">修改密码</span>
            <svg-icon class="right" icon-class="icon_right" />
            <div class="right-txt">*****</div>
          </div>
        </div>
        <div class="public-list-item" @click="goToEdit('invoice')">
          <div class="content">
            <span class="txt">发票信息</span>
            <svg-icon class="right" icon-class="icon_right" />
            <div class="right-txt"></div>
          </div>
        </div>
      </div>
      <div class="btn logout-btn" @click="logout">
        <span>退出当前账号</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { editAvatar } from '@/api/user'
import uploadImg from '@/components/uploadImg'
import avatarSrc from '@/assets/images/default_avator.png'
export default {
  name: 'Index',
  components: {
    uploadImg
  },
  data() {
    return {
      avatarSrc: avatarSrc
    }
  },
  computed: {
    ...mapGetters([
      'avatar',
      'name',
      'account'
    ])
  },
  methods: {
    // 接收上传组件传出的图片数据
    singleImg(val) {
      editAvatar({ head_image: val }).then(res => {
        const data = res.data
        if (data.status_code === 200) {
          this.$store.dispatch('GetUserInfo')
        } else {
          this.$toast.fail({
            message: data.message,
            duration: 1500
          })
        }
      })
    },
    editAvatar() {
      this.$refs.uploadImgs.editAvatar()
    },
    goToEdit(type) {
      this.$router.push({
        name: 'edit-info',
        query: {
          editType: type
        }
      })
    },
    // 退出登录
    logout() {
      this.$store.dispatch('FedLogOut').then(() => {
        this.$router.push({
          path: '/login',
          query: {
            shop_id: localStorage.getItem('shop_id')
          }
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
  @import "src/styles/mixin.scss";
  .logout-btn{
    width: 100%;
    height: pxCalc(50px);
    line-height: pxCalc(50px);
    text-align: center;
    font-size: pxCalc(13px);
    color: #666;
    background: #fff;
    color: #ee3f34;
    position: fixed;
    bottom: 0;
    border-top: pxCalc(1px) solid #eee;
    &:active{
      background: #eee;
    }
  }
</style>
